<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <el-form :model="formInline" class="grids columnsLine4">
          <el-form-item label="出库计划单">
            {{formInline.deliveryNo}}
          </el-form-item>
          <el-form-item label="计划出库日期">
            {{formInline.plannedDate}}
          </el-form-item>
          <el-form-item label="客户">
            {{formInline.customersName}}
          </el-form-item>
          <el-form-item label="结算客户">
            {{formInline.settlementCustomersName}}
          </el-form-item>
          <el-form-item label="出库类型">
            {{counter.idString_format("deliveryType",formInline.deliveryType)}}
          </el-form-item>
          <el-form-item label="收货地址">
            {{formInline.deliveryAddress}}
          </el-form-item>
          <el-form-item label="总重量（KG）">
            {{formInline.totalWeight}}
          </el-form-item>
          <el-form-item label="总体积（m³）">
            {{formInline.totalVolume}}
          </el-form-item>
          <el-form-item label="出库状态">
            {{counter.idString_format("deliveryStatus",formInline.status)}}
          </el-form-item>
          <el-form-item label="创建人">
            {{formInline.createBy}}
          </el-form-item>
          <el-form-item label="创建时间">
            {{formInline.createTime}}
          </el-form-item>
          <el-form-item label="备注">
            {{formInline.remark}}
          </el-form-item>
        </el-form>
      </template>
    </el-card>

    <el-card class="box-card">
      <template #header>
        <el-form :model="form" class="grids columnsLine4">
          <el-form-item label="货物编码">
            <el-input v-model="form.cargoSn" placeholder="请输入货物编码" clearable />
          </el-form-item>
          <el-form-item label="货物名称">
            <el-input v-model="form.cargoSn" placeholder="请输入货物编码" clearable />
          </el-form-item>
          <el-form-item label="供应商">
            <el-input v-model="form.cargoSn" placeholder="请输入货物编码" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="init">重置</el-button>
          </el-form-item>
        </el-form>
      </template>
      <div class="actionBtn">
        <el-button type="primary" @click="proxy.$refs.selectPlanCargoCom.open(formInline.deliveryNo)">新增</el-button>
        <el-button type="danger" @click="batchDel" :disabled="!multipleSelection.length">批量删除</el-button>
      </div>

      <el-table :data="tableParams.rows" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" width="50" />
        <!-- <el-table-column prop="lotNo" label="批次号" align="center" min-width="200" /> -->
        <el-table-column prop="cargoSn" label="货物编码" align="center" min-width="200" />
        <el-table-column prop="cargoName" label="货物名称" />
        <el-table-column prop="plannedNum" label="计划出库数量" min-width="120" align="center" />
        <el-table-column prop="num" label="实际出库数量" min-width="120" align="center" />
        <el-table-column label="单位">
          <template #default="scope">
            <selectUnit v-model="scope.row.cargoUnit" readonly="1"></selectUnit>
          </template>
        </el-table-column>
        <el-table-column prop="supplierName" label="供应商" align="center" min-width="200" />
        <el-table-column prop="cargoWeight" label="重量（KG）" align="center" min-width="100" />
        <el-table-column prop="cargoVolume" label="体积(m³)" />
        <el-table-column prop="cargoSpec" label="规格" align="center" min-width="100" />
        <el-table-column prop="remark" label="备注" align="center" />
        <el-table-column label="操作" fixed="right" width="200" align="center">
          <template #default="scope">
            <el-button type="primary" text @click="handClick(scope.row,1)">编辑</el-button>
            <el-button type="primary" text @click="handClick(scope.row,2)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <Pagination v-if="tableParams['total']" :total="tableParams['total']" v-model:page="form.pageNum" v-model:limit="form.pageSize" @pagination="getInfo" />

      <selectPlanCargo ref="selectPlanCargoCom" @fatherMethods="init"></selectPlanCargo>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import selectPlanCargo from "@/views/delivery/components/selectPlanCargo.vue";
const { proxy } = getCurrentInstance();
import { onMounted } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
import useCounterStore from "@/store/counter";
const counter = useCounterStore();

let formInline = ref({});
let planId = null;
let tableParams = ref({});
let form = ref({
  deliveryNo: "",
  lotNo: "",
  cargoSn: "",
  cargoName: "",
  supplierSn: "",
  supplierName: "",
  pageSize: 10,
  pageNum: 1,
});
let multipleSelection = ref({});

//生命周期
onMounted(async () => {
  planId = route.query.id;
  await getDatails();
  init();
});

let getDatails = async () => {
  let { data } = await proxy.$apis.deliveryPlanDetail(planId);
  formInline.value = data;
  //调拨出库，并且有关联的调拨号
  if (data.deliveryType == "transfer" && data.relateNo) {
    let resp = await proxy.$apis.transferDetailQuery({
      transferSn: data.relateNo,
    });
    console.log("货物", resp.data);
  }
};
let getInfo = async () => {
  form.value.deliveryNo = formInline.value.deliveryNo;
  tableParams.value = await proxy.$apis.deliveryPlanDetailList(form.value);
};
let search = () => {
  form.value.pageNum = 1;
  getInfo();
};
let init = () => {
  form.value = {
    deliveryNo: "",
    lotNo: "",
    cargoSn: "",
    cargoName: "",
    supplierSn: "",
    supplierName: "",
    pageSize: 10,
    pageNum: 1,
  };
  getInfo();
};
let handClick = async (row, num) => {
  switch (num) {
    case 1:
      proxy.$refs.selectPlanCargoCom.open(row);
      break;
    case 2:
      let resp = await proxy.$utils.confirmTips(`是否确定删除?`);
      if (!resp) return;
      await proxy.$apis.deliveryPlanDetailDel(row.id);
      proxy.$utils.showToast("删除成功");
      init();
      break;
    default:
      break;
  }
};
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};
let batchDel = async () => {
  let resp = await proxy.$refs.confirmTips(`是否确定删除选中项?`);
  if (!resp) return;
  let ids = [];
  for (let index = 0; index < multipleSelection.value.length; index++) {
    const element = multipleSelection.value[index];
    ids.push(element.id);
  }
  await proxy.$apis.deliveryPlanDetailDel(ids.toString());
  proxy.$utils.showToast("删除成功");
  init();
};
</script>

<style lang="scss" scoped>
.box-card {
  margin: 20px;
  .el-form {
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
.actionBtn {
  margin-bottom: 15px;
}
</style>
